<script setup>
import { ref, defineProps, defineEmits, onMounted, onUpdated, onUnmounted } from 'vue';
import { formatTime } from '../../utils/tim_formt.js'
// 这里先假定为3分27秒

const playIcon = ref("#icon-zanting");
const props = defineProps({
    isPlay: {
        type: Boolean,
        default: true
    },
    data:{
        type: Object,
        default: () => {
            return {
                name: '未知歌曲',
                singer: '未知歌手',
                url: '',
                totalTime: 0,
                step: 0
            }
        }
    }   
})


const emit = defineEmits(['playMusic'])
const onClickPlayButton = () => {
    emit('playMusic', !props.isPlay)

}
// 当点击下一首时，触发父组件的nextMusic事件，并传递下一首歌曲的url
const onNext = () => {
    emit('nextMusic', nextUrl)
}
// 当点击上一首时，触发父组件的prevMusic事件，并传递上一首歌曲的url
const onPrev = () => {
    emit('prevMusic', prevUrl)
}

// 进度条控制
// 控制逻辑：当进度条改变时，触发父组件的progressChange事件，并传递当前进度条的值
const onProgressChange = (e) => {
    let progress = e.target.value
    emit('progressChange', progress)
}


onMounted(() => {
    
})

onUpdated(() => {
    props.isPlay ? playIcon.value = "#icon-zanting" : playIcon.value = "#icon-bofang3"

})

onUnmounted(() => {
})


</script>
<template>
    <!-- 顶部播放器 -->
    <div class="play">
        <div class="left">
            <img src="/images/myndy.jpg" alt="">
            <div class="music-t-d">
                <span>
                    {{ props.data.name }}
                </span>
                <span>{{ props.data.singer }}</span>
            </div>
        </div>
        <!-- 进度条 -->
        <div class="speed">
            <span class="start">{{ formatTime(data.step) }}</span>
            <input @change="onProgressChange" type="range" min="0" max="100" :value="data.step / data.totalTime * 100" class="range">
            <span class="end">{{ formatTime(data.totalTime)}} </span>
            <svg class="icon" aria-hidden="true" @click="onClickPlayButton">
                <use :xlink:href="playIcon"></use>
            </svg>
        </div>
        <div class="right">
            <svg class="icon" aria-hidden="true" @click="onPrev">
                <use xlink:href="#icon-yinpinshangyiquxiayiqu1"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="onNext">
                <use xlink:href="#icon-yinpinshangyiquxiayiqu"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-beijingyinle"></use>
            </svg>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.play {
    padding: 0 20px;
    width: 100%;
    height: 80px;
    background-color: #33333344;
    color: #fff;
    display: flex;
    justify-content: space-between;

    // 播放组件左侧
    .left {
        display: flex;
        padding: 10px;
        flex: 1;

        .music-t-d {
            display: flex;
            flex-direction: column;

            :nth-child(2) {
                margin-top: 10px;
                font-size: 14px;
                color: #999999;
            }
        }

        img {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            margin-right: 10px;
            box-shadow: 0px 0px 2px #fff;
        }

        span {
            font-size: 16px;
        }
    }

    // 播放组件中间
    .speed {
        display: flex;
        align-items: center;
        flex: 4;

        .range {
            width: 80%;
            margin: 0 10px;
        }

        span {
            font-size: 14px;
        }

        .icon {
            width: 30px;
            height: 30px;
            color: #fff;
            margin: 10px;
            margin-left: 20px;
        }

        svg {
            fill: #fff;
        }
    }

    // 播放组件右侧
    .right {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-right: 30px;
        flex: 1;

        svg {
            width: 30px;
            height: 30px;
            color: #fff;
            margin: 20px 10px;
            fill: #fff;
        }
    }
}

svg {
    fill: #fff;
}
</style>